import { Panel, LayerLink, ImgHolder } from 'comps/common';
import AuthDevTeams from '../containers/auth-dev-teams';
import CompanyRunnableGroups from '../containers/runnable-groups';
import MachineSearchListCompany from '../../machine-manage/containers/machine-search-list-company';

const CompanyList = ({ fetching, companies }) => {
  return (
    <Panel spinner={fetching}>
      <div className='table-list company-admin-list'>
        {companies.map(({ id, logo, name, desc }) => {
          return (
            <div className='table-list-item' key={id}>
              <div className='table-list-cell company-logo-cell'>
                <ImgHolder className='company-logo' src={logo} alt={name} rect='80x80' random='yes' text={name.substring(0, 1)}/>
              </div>
              <div className='table-list-cell'>
                <h3 className='company-name'>{name}</h3>
                <p className='company-desc'>{desc}</p>
              </div>
              <div className='table-list-cell operator-cell'>
                <LayerLink title={`机器管理 (${name})`} component={MachineSearchListCompany}
                  data={{ companyId: id }}
                >机器管理</LayerLink>
              </div>
              <div className='table-list-cell operator-cell'>
                <LayerLink title={`项目管理 (${name})`} component={CompanyRunnableGroups}
                  data={{ companyId: id }}
                >项目管理</LayerLink>
              </div>
              <div className='table-list-cell operator-cell'>
                <LayerLink title={`开发组授权 (${name})`} component={AuthDevTeams} data={{ companyId: id }}>开发组授权</LayerLink>
              </div>
            </div>
          );
        })}
      </div>
    </Panel>
  );
};

export default CompanyList;
